<template>
    <div class="transfer-management">
      <!-- 顶部工具栏 -->
      <div class="toolbar">
        <el-form :inline="true">
            <el-form-item label="移库状态">
          <!-- 按钮形式的状态筛选 -->
          <el-radio-group v-model="filterForm.status">
            <el-radio-button 
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
          <el-form-item label="移库单号">
            <el-input v-model="filterForm.transferNo" placeholder="请输入移库号" />
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="handleSearch">Q 搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
  
        <el-button type="primary" class="add-btn">新增</el-button>
      </div>
  
      <!-- 数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="transferNo" label="单号" width="160" />
        <el-table-column prop="sourceWarehouse" label="源仓库" />
        <el-table-column prop="targetWarehouse" label="目标仓库" />
        <el-table-column prop="status" label="移库状态" />
        
        <el-table-column label="总数含量/总金额（元）">
          <template #default="{ row }">
            <div class="amount-cell">
              <div v-if="row.quantity" class="quantity">数量：{{ row.quantity }}</div>
              <div v-if="row.amount" class="amount">金额：{{ row.amount }}</div>
            </div>
          </template>
        </el-table-column>
  
        <el-table-column prop="operationTime" label="操作时间" width="150" />
        <el-table-column prop="operator" label="操作人" width="100" />
        <el-table-column prop="remark" label="备注" />
        
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">修改</el-button>
            <el-button type="success" size="small" @click="handleView(row)">查看</el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
            <el-button type="warning" size="small" @click="handlePrint(row)">打印</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from 'vue'
  
  interface StockTransferItem {
    transferNo: string
    sourceWarehouse: string
    targetWarehouse: string
    status: '已移库' | '未移库' | '作废'
    quantity?: number
    amount?: number
    operationTime: string
    operator: string
    remark?: string
  }
  
  // 筛选表单
  const filterForm = reactive({
    status: '',
    transferNo: ''
  })
  
  // 分页参数
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 100
  })
  
  // 状态选项
  const statusOptions = [
    { value: '', label: '全部' },
    { value: '1', label: '未移库' },
    { value: '2', label: '已移库' },
    { value: '3', label: '作废' }
  ]
  
  // 完整示例数据
  const tableData = ref<StockTransferItem[]>([
    {
      transferNo: 'KY03086684',
      sourceWarehouse: '苏州园区',
      targetWarehouse: '常熟冷链仓',
      status: '已移库',
      quantity: 1260,
      amount: 28500,
      operationTime: '03-08 17:40',
      operator: 'ck',
      remark: '紧急调拨'
    },
    {
      transferNo: 'KY03086685',
      sourceWarehouse: '上海浦东仓',
      targetWarehouse: '南京分仓',
      status: '未移库',
      quantity: 850,
      amount: 19200,
      operationTime: '03-08 14:20',
      operator: 'lily'
    },
    {
      transferNo: 'KY03086686',
      sourceWarehouse: '广州中心仓',
      targetWarehouse: '深圳分仓',
      status: '已移库',
      quantity: 2100,
      amount: 45600,
      operationTime: '03-07 09:15',
      operator: 'tom',
      remark: '常规补货'
    },
    {
      transferNo: 'KY03086687',
      sourceWarehouse: '成都仓库',
      targetWarehouse: '重庆分仓',
      status: '作废',
      operationTime: '03-06 16:45',
      operator: 'jack',
      remark: '操作失误'
    },
    {
      transferNo: 'KY03086688',
      sourceWarehouse: '武汉中心仓',
      targetWarehouse: '长沙分仓',
      status: '已移库',
      quantity: 1500,
      amount: 32400,
      operationTime: '03-05 11:30',
      operator: 'sara'
    }
  ])
  
  // 操作方法
  const handleSearch = () => {
    console.log('执行搜索', filterForm)
  }
  
  const handleReset = () => {
    filterForm.status = ''
    filterForm.transferNo = ''
  }
  
  const handleEdit = (row: StockTransferItem) => {
    console.log('修改', row)
  }
  
  const handleView = (row: StockTransferItem) => {
    console.log('查看详情', row)
  }
  
  const handleDelete = (row: StockTransferItem) => {
    console.log('删除记录', row)
  }
  
  const handlePrint = (row: StockTransferItem) => {
    console.log('打印单据', row)
  }
  </script>
  
  <style scoped>
  .transfer-management {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  
  .toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 15px;
  }
  
  .add-btn {
    margin-left: auto;
    padding: 10px 20px;
  }
  
  .amount-cell {
    line-height: 1.5;
    
    .quantity {
      font-weight: 600;
      color: #333;
      font-size: 14px;
    }
    
    .amount {
      color: #67c23a;
      font-size: 13px;
    }
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .el-table {
    margin-top: 20px;
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f8f9fa;
  }
  
  .el-table-column--selection .cell {
    padding-left: 10px;
  }
  
  .el-button + .el-button {
    margin-left: 8px;
  }
  
  @media (max-width: 768px) {
    .toolbar {
      flex-direction: column;
    }
    
    .add-btn {
      width: 100%;
      margin-top: 10px;
    }
    
    .el-form--inline .el-form-item {
      margin-right: 10px;
    }
  }
  .el-radio-group {
  display: flex;
  gap: 4px;
}

.el-radio-button {
  --el-radio-button-checked-bg-color: var(--el-color-primary-light-9);
  --el-radio-button-checked-text-color: var(--el-color-primary);
  
  /* 按钮边框样式 */
  :deep(.el-radio-button__inner) {
    border-left: 1px solid var(--el-border-color);
    border-radius: 4px;
    transition: all 0.2s;
  }
  
  /* 选中状态样式 */
  &.is-active {
    :deep(.el-radio-button__inner) {
      border-color: var(--el-color-primary);
      box-shadow: none;
      transform: scale(1.05);
    }
  }
}
  </style>